<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/award_header.css">
    <link rel="stylesheet" href="css/award_article.css">
    <link rel="stylesheet" href="css/award_footer.css">
    <title>Document</title>
</head>

<body>
    <div class="warp">
        <!-- 头部 -->
        <header>
            <!-- 底部 -->
            <nav class="header_top">
                <div>
                    <ul>
                        <li><a href="">彩贝官网</a></li>
                        <li><a href="">返利商城</a></li>
                        <li><a href="">积分商城</a></li>
                        <li><a href="">彩贝商旅</a></li>
                        <li><a href="">拍拍返利</a></li>
                    </ul>
                    <ul>
                        <li><a href="">登录</a></li> |
                        <li><a href="">彩贝论坛</a></li> |
                        <li><a href="">彩贝微博</a></li> |
                        <li><a href="">帮助中心</a></li> |
                        <li><a href=""><button type="button" name="button">+订阅邮件</button></a></li>

                    </ul>
                </div>
                <div></div>

            </nav>
            <!-- 以及导航兰 -->
            <nav class="header_buttom">
                <section>


                    <div class="logo">

                    </div>
                    <ul>
                        <li><a href="">积分兑换</a><span> | </span></li>
                        <li><a href="">积分抽奖 </a><span> | </span></li>
                        <li><a href="">苹果专区 </a><span> | </span><i></i></li>
                        <li><a href="">个人中心</a></li>

                    </ul>
                </section>
            </nav>


        </header>

        <article>
            <!-- 坐边的导航 -->
            <section class="article_left">
                <div class="sidebar">
                    <div class="bar-one">
                        <a href="#">
                            <span class="one-sp1"></span>
                            <span class="one-sp2">
                              积分兑换
                          </span>
                            <span class="one-sp3">
                              彩贝积分可兑换千种好礼
                          </span>
                            <span class="one-sp4"></span>
                        </a>
                    </div>
                    <div class="bar-two">
                        <dt><a href="">实物礼品</a></dt>
                        <dd><a href="">数码家电</a></dd>
                        <dd><a href="">家具生活</a></dd>
                        <dd><a href="">玩具公仔</a></dd>
                        <dd><a href="">运动户外</a></dd>
                        <dd><a href="">服装箱包</a></dd>
                        <dd><a href="">美容美妆</a></dd>
                    </div>
                    <div class="bar-three">
                        <dt><a href="#">线上礼品</a></dt>
                        <dd><a href="#">虚拟礼品</a></dd>
                        <dd><a href="#">游戏兑换</a></dd>
                        <dd><a href="#">优惠券</a></dd>
                    </div>
                    <div class="bar-four">
                        <a href="#">
                            <span class="four-sp1"></span>
                            <span class="four-sp2">积分抽奖</span>
                            <span class="four-sp3">小积分成就大梦想&nbsp;&nbsp;</span>
                            <span class="four-sp4"></span>
                        </a>
                    </div>
                    <h3 class="bar-h">特色专区</h3>
                    <div class="bar-five">
                        <ul>
                            <li><a href="#">新品上市 <span></span></a></li>
                            <li><a href="#">爆款推荐<span></span></a></li>
                            <li class="ul-bg"><a href="#">Image专区</a></li>
                            <li class="ul-bg"><a href="#">手机电脑专区</a></li>
                            <li><a href="#">手表配饰专区</a></li>
                            <li><a href="#">精品厨具专区<span></span></a></li>
                            <li class="ul-bg"><a href="#">运动水杯专区<span></span></a></li>
                            <li class="ul-bg"><a href="#">家居特卖场<span></span></a></li>
                        </ul>
                    </div>
                </div>
            </section>





            <section class="article_right">
                <div class="article_right_award">
                    <div class="lottery-cont">
                        <!-------------------抽奖转盘---------------->
                        <div class="lot-box">
                            <div class="box">
                                <div id="ZP_box">
                                    <img id="imgs" src="lottery_img/bg.png" alt="" />
                                </div>
                                <div class="bg"></div>
                                <div id="btn"></div>
                                <div class="wdS">
                                    <p class="text">恭喜您抽中：1彩贝积分！</p>
                                    <button id="btn2">再来一</button>
                                </div>
                            </div>

                        </div>
                        <!-------------------抽奖信息区-------------->
                        <div class="lot-tab">
                            <ul class="tab-ul">
                                <li class="tab-li1">本期大奖</li>
                                <li class="tab-li2">下期大奖</li>
                            </ul>
                            <div class="tab-prize">
                                <img src="image-awary/00.jpg" alt="" />
                                <p>
                                    <span>iPad4 wifi版 16G白色</span>
                                    <span>3688元 <ins>1台</ins></span>
                                </p>
                            </div>
                            <div class="tab-time">
                                <p>
                                    <strong id="time-tab">活动时间：2013.08.03-2014.02.28
                                  </strong></p>
                                <span></span>
                            </div>
                            <div class="tab-list-box">
                                <h2>上期活动大奖中奖名单公布</h2>
                                <ul>
                                    <li>恭喜QQ号2******525同学获得iPhone5</li>
                                    <li>只要1彩贝，下一个大奖得主可能是你哦</li>
                                </ul>
                                <div class="tab-last">
                                    <a href="">查看我的中奖记录»</a>
                                    <a href="">查看我的收货地址»</a>
                                    <span></span>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="article_right_img_nav">
                    <div class="earn-integral">
                        <h2>彩贝积分余额不足？快速赚取彩贝</h2>
                        <a href="#" class="earn-a">更多赚取彩贝积分方法</a>
                        <ul>
                            <li>
                                <a href=""><img src="image-awary/0%20(8).jpg" alt="" /></a>
                                <p>
                                    <span>免费赚彩贝</span>
                                    <span>返210彩贝</span>
                                </p>
                                <div class="btns-line">
                                    <a href="#">去赚积分</a>
                                </div>
                            </li>
                            <li>
                                <a href=""><img src="image-awary/22.jpg" alt="" /></a>
                                <p>
                                    <span>充值腾讯业务</span>
                                    <span>返9%彩贝</span>
                                </p>
                                <div class="btns-line">
                                    <a href="#">去赚积分</a>
                                </div>
                            </li>
                            <li>
                                <a href=""><img src="image-awary/0%20(5).jpg" alt="" /></a>
                                <p>
                                    <span>小积分 大用途</span>
                                    <span>积分怎么赚</span>
                                </p>
                                <div class="btns-line">
                                    <a href="#">去赚积分</a>
                                </div>
                            </li>
                            <li>
                                <a href=""><img src="image-awary/0%20(4).jpg" alt="" /></a>
                                <p>
                                    <span>从彩贝跳转购物</span>
                                    <span>赚高额积分</span>
                                </p>
                                <div class="btns-line">
                                    <a href="#">去赚积分</a>
                                </div>
                            </li>
                            <li>
                                <a href=""><img src="image-awary/0%20(2).jpg" alt="" /></a>
                                <p>
                                    <span>彩贝携手公益</span>
                                    <span>月捐送彩贝</span>
                                </p>
                                <div class="btns-line">
                                    <a href="#">去赚积分</a>
                                </div>
                            </li>
                            <li>
                                <a href=""><img src="image-awary/0%20(1).jpg" alt="" /></a>
                                <p>
                                    <span>彩贝抢霸</span>
                                    <span>超值购物赚积分</span>
                                </p>
                                <div class="btns-line">
                                    <a href="#">去赚积分</a>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
                <!-- 获奖用户 -->
                <div class="gmi-bear">
                    <div class="gmi-win">
                        <h2>最近中奖的用户</h2>
                        <ul>
                            <li class="li-title"><span class="name">奖品名称</span><span class="uld">用户QQ号</span><span class="time">中奖时间</span></li>
                            <li><span class="name">1彩贝积分</span><span class="uld">***570951</span><span class="time">2014-12-31 23:58:58</span></li>
                            <li><span class="name">1彩贝积分</span><span class="uld">***158756</span><span class="time">2014-12-31 23:57:28</span></li>
                            <li><span class="name">1彩贝积分</span><span class="uld">***587649</span><span class="time">2014-12-31 23:55:13</span></li>
                            <li><span class="name">1彩贝积分</span><span class="uld">***958713</span><span class="time">2014-12-31 23:55:12</span></li>
                            <li><span class="name">1彩贝积分</span><span class="uld">***875426</span><span class="time">2014-12-31 23:54:59</span></li>
                            <li><span class="name">1彩贝积分</span><span class="uld">***663477</span><span class="time">2014-12-31 23:52:03</span></li>
                            <li><span class="name">1彩贝积分</span><span class="uld">***877789</span><span class="time">2014-12-31 23:49:41</span></li>
                            <li><span class="name">1彩贝积分</span><span class="uld">***444456</span><span class="time">2014-12-31 23:45:21</span></li>
                            <li><span class="name">1彩贝积分</span><span class="uld">***223323</span><span class="time">2014-12-31 23:41:53</span></li>
                            <li><span class="name">1彩贝积分</span><span class="uld">***131313</span><span class="time">2014-12-31 23:38:22</span></li>
                        </ul>
                    </div>
                    <div class="gmi-wb">
                        <h2>微博分享</h2>
                        <textarea name="" id="wb-text" cols="45" rows="3">#1彩贝抽iPad4啦#iPad4，QQ公仔，Q币，彩贝等奖品，中奖率100%，快来参加哦！  http://cb.qq.com/jifen/lottery.html</textarea>
                        <div class="btn-fs">
                            <a href="#">发&nbsp;送</a>
                        </div>
                        <ul>
                            <li>
                                <div>
                                    <img src="image-awary/500.jpg" alt="" />
                                </div>
                                <p>
                                    <span class="user-name">Elim_琳</span>
                                    <span class="user">#1彩贝抽iPad4啦#iPad4，QQ公仔，Q币，彩贝等奖品，中奖率100%，快来参加哦！<a href="">http://url.cn/SbSJcL</a></span>
                                    <span class="user">
                                <span class="wb-user-time">2016.12.16 11:07:12 </span> 来自QQ彩贝
                                    </span>
                                </p>

                            </li>
                            <li>
                                <div>
                                    <img src="image-awary/50.jpg" alt="" />
                                </div>
                                <p>
                                    <span class="user-name">翟祖圣</span>
                                    <span class="user">#1彩贝抽iPad4啦#iPad4，QQ公仔，Q币，彩贝等奖品，中奖率100%，快来参加</span>
                                    <span>
                            </span>
                                </p>
                            </li>
                        </ul>
                    </div>
                </div>
            </section>


        </article>
        <footer>
            <div class="bottom_query">

                <div class="bot-que-one">
                    <a href="#">
                        <img src="./image-awary/logo_cba150x85.jpg" alt="" />
                    </a>
                </div>
                <div class="bot-que-ul">
                    <h3>彩贝积分服务</h3>
                    <ul>
                        <li>什么是彩贝积分？</li>
                        <li>彩贝积分账户</li>
                        <li>新手操作指引</li>
                    </ul>
                </div>
                <div class="bot-que-ul">
                    <h3>赚取彩贝积分</h3>
                    <ul>
                        <li>怎样获得彩贝积分？</li>
                        <li>获得彩贝的时长？</li>
                        <li>彩贝有效期多久？</li>
                    </ul>
                </div>
                <div class="bot-que-ul">
                    <h3>使用彩贝积分</h3>
                    <ul>
                        <li>兑换实物包邮吗？</li>
                        <li>填写收货地址</li>
                        <li>兑换实物的步骤</li>
                    </ul>
                </div>
                <div class="bot-que-ul">
                    <h3>客服服务</h3>
                    <ul>
                        <li>帮助中心</li>
                    </ul>
                </div>
            </div>

            <div class="bottom_about">
                <p>
                    <a href="#">关于腾讯</a> |
                    <a href="#">About Tencent</a> |
                    <a href="#">服务条款</a> |
                    <a href="#">广告服务</a> |
                    <a href="#">腾讯招聘</a> |
                    <a href="#">客服中心</a> |
                    <a href="#">网站导航</a> |
                </p>
                <p>Copyright©1998-2016 Tencent. All Rights Reserved.</p>
                <p>腾讯公司 <a href="#">版权所有</a></p>
            </div>

        </footer>
    </div>
    </div>
    <script src="./js/lottery.js" charset="utf-8"></script>
</body>

</html>
